<template>
  <div>
    <div class="leave">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="日期">
          <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="YYYY-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户id">
          <el-input type="text" v-model="userId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="serchUser(date, userId, departId)">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="businessTripId" label="序号">
        </el-table-column>
        <el-table-column prop="userId" label="申请人">
        </el-table-column>
        <el-table-column prop="submitTime" label="提交时间">
        </el-table-column>
        <el-table-column prop="pass" label="状态">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleView(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
        :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-drawer :visible.sync="describleshow" direction="ttb" size="50%" :before-close="handleClose"
      :modal-append-to-body="false" v-if="describle.length">
      <el-descriptions title="请假信息" border>
        <el-descriptions-item label="出差单编号">{{ this.describle[0] }}</el-descriptions-item>
        <el-descriptions-item label="员工id">{{ this.describle[1] }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ this.describle[2] }}</el-descriptions-item>
        <el-descriptions-item label="出差理由">{{ this.describle[3] }}</el-descriptions-item>
        <el-descriptions-item label="审核信息">{{ this.describle[4] }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ this.describle[5] }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ this.describle[6] }}</el-descriptions-item>
        <el-descriptions-item label="出发地点">{{ this.describle[7] }}</el-descriptions-item>
        <el-descriptions-item label="到达地点">{{ this.describle[8] }}</el-descriptions-item>
        <el-descriptions-item label="交通工具">{{ this.describle[9] }}</el-descriptions-item>
        <el-descriptions-item label="预算">{{ this.describle[10] }}</el-descriptions-item>
        <el-descriptions-item label="提交时间">{{ this.describle[11] }}</el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: 20px;text-align: center;">
        <el-button @click="handlePass(describle[0])" type="primary" size="small">通过</el-button>
        <el-button @click="handleNotPass(describle[0])" type="danger" size="small">拒绝</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getBusinessTripList, examineBusinessTrip } from '@/api/api'
export default {
  data () {
    return {
      tableData: [],
      pageNumber: 1,
      pageSize: 5,
      total: 0,
      departList: [],
      userId: '',
      senderId: this.$store.state.userId, // 审批人
      receiverId: '', // 被审批人
      date: '',
      describle: [],
      describleshow: false
    }
  },
  methods: {
    searchUser (date, pass, departId) {
      const startTime = date[0]
      const endTime = date[1]
      console.log(date)
      const params = {
        userId: this.userId,
        departId: departId,
        pass: pass,
        startTime: startTime,
        endTime: endTime,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      getBusinessTripList(params).then(res => {
        // console.log(res.data)
        this.tableData = res.data.data.list
      })
    },
    handleView (row) {
      this.describle = []
      this.receiverId = row.userId
      console.log(row)
      this.describle.push(row.businessTripId)
      this.describle.push(row.userId)
      this.describle.push(row.pass)
      this.describle.push(row.reason)
      this.describle.push(row.comments)
      this.describle.push(row.startTime)
      this.describle.push(row.endTime)
      this.describle.push(row.startLocation)
      this.describle.push(row.endLocation)
      this.describle.push(row.vehicle)
      this.describle.push(row.advance)
      this.describle.push(row.submitTime)
      // console.log(this.describle)
      this.describleshow = true
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.serchUser()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      this.serchUser()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handlePass (id) {
      this.$prompt('请输入审核信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const params = {
          businessTripId: id,
          pass: 2,
          comments: value
        }
        examineBusinessTrip(params).then(res => {
          console.log(res.data)
          this.$router.go()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'

        })
        this.$router.go()
      })
    },
    handleNotPass (id) {
      this.$prompt('请输入审核信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const params = {
          businessTripId: id,
          pass: 1,
          comments: value
        }
        examineBusinessTrip(params).then(res => {
          console.log(res.data)
          this.$router.go()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'

        })
        this.$router.go()
      })
    }
  },
  mounted () {
    this.searchUser(this.date, this.pass, this.departId)
  }
}
</script>

<style lang="scss" scoped>
.leave {
  margin: 20px 0px 0px 0px;
}
</style>
